iT邦幫忙

2024 iThome 鐵人賽

DAY 10
0

Must know dev tools tricks開發者工具

這單元好喜歡,不用寫js也不用html、css,單純認識一下開發者工具中的各種console

直接滑鼠右鍵打開檢查,選擇console,就可以開始玩了.快速打印出各種資料,方便你開始debug.身為新手,每天抓bug是日常生活哈哈
https://ithelp.ithome.com.tw/upload/images/20240919/20169174xSYr88e3Cy.png

技巧點

1. console.log()

  • 打印出字串,或者變數.
console.log("how dare you?");
const name = "jack";
console.log("name is" + " " + name ); // name is jack
  • 打印出emoji表情符號,用%s當作一個替代,後面再加上你要的emoji.
console.log("hi i am a %s", "🤨🤨"); // hi i am a 🤨🤨
  • 利用%c 去將打印出的東西加入css呈現.有點像是在html寫行內style一樣的寫法
    https://ithelp.ithome.com.tw/upload/images/20240919/20169174E8JvnBbEga.png
  1. console.warn()
  • 打印出來的東西,會出現驚嘆號的黃色警告.
    https://ithelp.ithome.com.tw/upload/images/20240919/20169174nnKzj5rj2M.png
  1. console.error()
  • 打印出來的東西,會出現X的錯誤紅色警告.
    https://ithelp.ithome.com.tw/upload/images/20240919/20169174oyJOemcz33.png
  1. console.info()
  • 打印出藍色的資訊
    https://ithelp.ithome.com.tw/upload/images/20240919/201691743IKvKnQdmC.png
  1. console.assert()
  • 當前面寫的判斷不符合時,會跳出後面寫好的錯誤訊息
    https://ithelp.ithome.com.tw/upload/images/20240919/20169174K2ueNFBntR.png
  1. console.clear()
  • 清除打印的所有紀錄
  1. console.dir()
  • 打印出DOM元素的所有相關資訊
  1. console.group()
  • 群組的方式將資料一次打印出來
    https://ithelp.ithome.com.tw/upload/images/20240919/20169174HLnYA0nKf5.png
  1. console.count()
  • 計算打印的次數,告訴你同一個打印的項目,已經打印了幾次.
  • countReset(),將次數歸零,重新計算
console.count("jack");
console.count("jack");
console.count("jack");
console.countReset("jack");
  1. console.time()
  • 可以知道完成某動作開始到結束後,所經過的時間.
console.time("start get data");
fetch("https://randomuser.me/api/")
  .then((res) => res.json())
  .then((data) => {
    console.timeEnd("fetch end")
    // console.log(data);
})

心得

原來console的用法這麼多樣,自己用最多的大概就只有console.log()而已,無腦的一直log
趁這個機會多認識一下console,未來說不定會用到


上一篇
Fun with HTML5 Canvas趣味畫布
下一篇
Hold Shift to Check Multiple Checkboxes
系列文
鱷魚帶我練習JavaScript之個人練功坊30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言